<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        /* 容器样式 */
        .container {
            display: flex;
            flex-wrap: wrap; /* 允许子元素换行 */
            justify-content: space-between;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .container > div {
            flex: 1;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        /* 第一个子元素样式 */
        .container > div:first-child {
            flex-basis: 100%; /* 占据一行 */
            text-align: center; /* 内容居中 */
        }

        /* 第二个及以后的子元素样式 */
        .container > div:not(:first-child) {
            flex: 1; /* 平分剩余空间 */
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        /* 文件树样式 */
        .file-tree {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .file-tree .directory {
            margin-bottom: 15px;
        }

        .file-tree .file {
            margin-bottom: 8px;
        }

        .checkbox-label {
            display: inline-block;
            margin-right: 10px;
            font-size: 14px;
        }

        /* 复选框样式 */
        .file-tree li input[type="checkbox"] {
            position: static;
            margin-left: 10px;
        }

        /* 按钮样式 */
        .delete-button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .delete-button:hover {
            background-color: #0056b3;
        }

        /* fieldset 样式 */
        fieldset {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        legend {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            padding: 0 10px;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 10px 15px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f4f4f9;
            color: #333;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-right: 5px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
    <script>
        function uploadSelectedFiles() {
            const checkboxes = document.querySelectorAll('input[name="file-checkbox"]:checked');
            const filePaths = [];
            checkboxes.forEach(checkbox => {
                filePaths.push(checkbox.value);
            });
            filePaths.forEach(path => {
                const formData = new FormData();
                // 这里需要注意，浏览器端无法直接读取本地文件路径，需要服务器端配合
                // 可以考虑将路径发送到后端，由后端读取文件并上传
                formData.append('file', path);

                fetch('./upload-to-remote', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => {
                        console.log()
                        if (response.ok) {
                            console.log('File uploaded successfully');
                            alert("上传成功")
                            return response.json()
                        }else{
                            console.log('File uploaded failed',response);
                            alert("上传失败")
                        }
                    }).then(data => {
                        console.log('Success:', data);
                    })
                    .catch(error => console.error('Error:', error));
            });
        }



        // 将任务信息填充到表格中
        function populateTaskTable(tasks) {
            const tableBody = document.getElementById('task-table-body');
            tasks.forEach(task => {
                const row = document.createElement('tr');
                const idCell = document.createElement('td');
                idCell.textContent = task.task_id;
                row.appendChild(idCell);

                const executorCell = document.createElement('td');
                executorCell.textContent = task.executor;
                row.appendChild(executorCell);

                const locationCell = document.createElement('td');
                locationCell.textContent = task.location;
                row.appendChild(locationCell);

                const statusCell = document.createElement('td');
                statusCell.textContent = task.status;
                row.appendChild(statusCell);

                const createTimeCell = document.createElement('td');
                createTimeCell.textContent = task.create_time;
                row.appendChild(createTimeCell);

                const actionCell = document.createElement('td');
                const startButton = document.createElement('button');
                startButton.textContent = '开始执行';
                startButton.addEventListener('click', () => startTask(task.task_id));
                actionCell.appendChild(startButton);

                const endButton = document.createElement('button');
                endButton.textContent = '结束执行';
                endButton.addEventListener('click', () => endTask(task.task_id));
                actionCell.appendChild(endButton);

                const uploadButton = document.createElement('button');
                uploadButton.textContent = '上传文件';
                uploadButton.addEventListener('click', () => uploadFile(task.task_id));
                actionCell.appendChild(uploadButton);

                const calculateButton = document.createElement('button');
                calculateButton.textContent = '计算体积';
                calculateButton.addEventListener('click', () => calculateVolume(task.task_id));
                actionCell.appendChild(calculateButton);

                row.appendChild(actionCell);
                tableBody.appendChild(row);
            });
        }

        // 开始任务函数
        function startTask(taskId) {
            console.log(`开始执行任务: ${taskId}`);
            // 可以添加调用接口开始任务的逻辑
        }

        // 结束任务函数
        function endTask(taskId) {
            console.log(`结束执行任务: ${taskId}`);
            // 可以添加调用接口结束任务的逻辑
        }

        // 上传文件函数
        function uploadFile(taskId) {
            console.log(`为任务 ${taskId} 上传文件`);
            // 可以添加调用接口上传文件的逻辑
        }

        // 计算体积函数
        function calculateVolume(taskId) {
            console.log(`为任务 ${taskId} 计算体积`);
            // 可以添加调用接口计算体积的逻辑
        }

        // 从接口获取任务信息
        async function fetchTasks() {
            try {
                const response = await fetch('/your-api-url'); // 替换为实际接口地址
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const tasks = await response.json();
                populateTaskTable(tasks);
            } catch (error) {
                console.error('Error fetching tasks:', error);
            }
        }

        function fetchTasks() {
            const tasks = [
                {
                    task_id: 1,
                    executor: "张三",
                    location: "北京",
                    status: "未开始",
                    create_time: "2025-03-10 09:00:00"
                },
                {
                    task_id: 2,
                    executor: "李四",
                    location: "上海",
                    status: "进行中",
                    create_time: "2025-03-11 10:30:00"
                },
                {
                    task_id: 3,
                    executor: "王五",
                    location: "广州",
                    status: "已完成",
                    create_time: "2025-03-12 14:15:00"
                },
                {
                    task_id: 4,
                    executor: "赵六",
                    location: "深圳",
                    status: "暂停",
                    create_time: "2025-03-12 15:45:00"
                }
            ];
            populateTaskTable(tasks);
        }

        // 页面加载完成后获取任务信息
        window.addEventListener('load', fetchTasks);
    </script>
    <title>pcd文件上传</title>
</head>

<body>
<div class="container">

    <div>
        <!-- 新增表格展示任务信息 -->
        <table id="task-table">
            <thead>
            <tr>
                <th>任务id</th>
                <th>执行人</th>
                <th>执行地点</th>
                <th>当前状态</th>
                <th>创建时间</th>
                <th>操作列</th>
            </tr>
            </thead>
            <tbody id="task-table-body">
            <!-- 任务信息将填充到这里 -->
            </tbody>
        </table>
    </div>
    <div>
        <fieldset>
            <legend>pcd文件({{path}})</legend>
            <ul class="file-tree">
                {% for item in file_tree['children'] %}
                {% if item['type'] == 'directory' %}
                <li class="directory">
                    <label class="checkbox-label" for="{{ item['name'] }}"> {{ item['name'] }}</label>
                    <input type="checkbox" name="file-checkbox" value="{{ item['name'] }}" id="{{ item['name'] }}">
                    <ul>
                        {% for child in item['children'] %}
                        {% if child['type'] == 'file' %}
                        <li class="file">
                            <label class="checkbox-label" for="{{ child['name'] }}">{{ child['name'] }}</label>
                            <label class="checkbox-label" for="{{ child['modified_time'] }}">{{ child['modified_time'] }}</label>
                            <label class="checkbox-label" for="{{ child['size_mb'] }}">{{ child['size_mb'] }}</label>
                            <input type="checkbox" name="file-checkbox" value="{{ child['path'] }}" id="{{ child['name'] }}">
                        </li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
            <button type="submit" class="delete-button" onclick="uploadSelectedFiles()">上传选中文件</button>
        </fieldset>
    </div>


    <div>
        <fieldset>
            <legend>pcd文件({{path}})</legend>
            <ul class="file-tree">
                {% for item in file_tree['children'] %}
                {% if item['type'] == 'directory' %}
                <li class="directory">
                    <label class="checkbox-label" for="{{ item['name'] }}"> {{ item['name'] }}</label>
                    <input type="checkbox" name="file-checkbox" value="{{ item['name'] }}" id="{{ item['name'] }}">
                    <ul>
                        {% for child in item['children'] %}
                        {% if child['type'] == 'file' %}
                        <li class="file">
                            <label class="checkbox-label" for="{{ child['name'] }}">{{ child['name'] }}</label>
                            <label class="checkbox-label" for="{{ child['modified_time'] }}">{{ child['modified_time'] }}</label>
                            <label class="checkbox-label" for="{{ child['size_mb'] }}">{{ child['size_mb'] }}</label>
                            <input type="checkbox" name="file-checkbox" value="{{ child['path'] }}" id="{{ child['name'] }}">
                        </li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
            <button type="submit" class="delete-button" onclick="uploadSelectedFiles()">上传选中文件</button>
        </fieldset>
    </div>

    <!-- 这里可以添加另一个div -->
    <div>
        <fieldset>
            <legend>视频文件({{path1}})</legend>
            <ul class="file-tree">
                {% for item in file_tree1['children'] %}
                {% if item['type'] == 'directory' %}
                <li class="directory">
                    <label class="checkbox-label" for="{{ item['name'] }}"> {{ item['name'] }}</label>
                    <input type="checkbox" name="file-checkbox" value="{{ item['name'] }}" id="{{ item['name'] }}">
                    <ul>
                        {% for child in item['children'] %}
                        {% if child['type'] == 'file' %}
                        <li class="file">
                            <label class="checkbox-label" for="{{ child['name'] }}">{{ child['name'] }}</label>
                            <label class="checkbox-label" for="{{ child['modified_time'] }}">{{ child['modified_time']
                                }}</label>
                            <label class="checkbox-label" for="{{ child['size_mb'] }}">{{ child['size_mb'] }}</label>
                            <input type="checkbox" name="file-checkbox" value="{{ child['name'] }}"
                                   id="{{ child['name'] }}">
                        </li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
            <button type="submit" class="delete-button">上传选中文件</button>
        </fieldset>
    </div>

</div>
</body>

</html>